<template>  
    <view class="activity-header" style="display: flex; justify-content: center;">  
	<view   style="height: 40px; line-height: 40px; width: 50%; text-align: center; border-bottom: 1px solid #0000ff; color: #0000ff;">
       进行中	
    </view>
	<view  style="height: 40px; line-height: 40px; width: 50%; text-align: center;">
		已结束
	</view>
    </view> 
  <view class="activity-page">  
 
  
    <view class="activity-list" >  
      <!-- 我的活动 -->  
      <view class="activity-item" v-for="(tab,index) in tabs" :key="index" @click="choose" >  
        <h2 style="margin-bottom: 10px;">{{tab.text}}</h2>  
        <p style="color: #999999;">计划开始时间:{{tab.timestart}}</p>  
        <p style="color: #999999;">计划结束日期: {{tab.timeend}}</p>  
        <p style="color: #999999;">活动区域: {{tab.act.ar}}</p>  
        <p style="color: #999999;">活动牵头组: {{tab.act.arr}}</p>
		<p style="color: #0000ff;margin-top: 20px;">李明于2023/03/29 更新了活动照片</p>
      </view>  
      <!-- 可以继续添加更多活动 -->  
    </view>  
   
  </view>  
</template>  
  
<script>  
export default {  
  data() {
	  return {
		  tabs: [
			  {text: '活动名称1', timestart: "2023/03/29", timeend: "2023/03/29", act:{ar:"湖北省武汉市洪山区", arr:"宣传组名称"}},
		      {text: '武汉第一中学', timestart: "2023/03/29", timeend: "2023/03/29", act:{ar:"湖北省武汉市洪山区", arr:"宣传组名称"}},
		  ]
	  }
  },
  methods: {
     choose() {
		 uni.navigateTo({
		 	url:"/pages/video/myActivities/show"
		 })
	 }
  }
}  
</script>  
  
<style scoped> 
 page {
	 background-color: #f5f5f9;
 }
.activity-page {  
  /* 页面样式 */  
  padding: 20px;  
  max-width: 800px;  
  margin: auto;  
  text-align: center;  
}  
  
.activity-header {  
  /* 头部样式 */  
  margin-bottom: 20px;  
  display: flex;
  justify-content: center;
}  
.action-buttons {
	
}
.activity-list {  
  /* 活动列表样式 */  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
.activity-item {  
  /* 单个活动样式 */  
  margin-bottom: 20px;  
  padding: 10px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
  width: 100%;  
  max-width: 600px;  
  text-align: left;  
  background-color: #fff;
  height: 200px;
}  
  
.activity-item h2 {  
  /* 活动标题样式 */  
  margin-top: 0;  
}  
  
.activity-image {  
  /* 活动图片样式 */  
  width: 100%;  
  max-width: 300px;  
  height: auto;  
  margin-top: 10px;  
  border-radius: 5px;  
}  
  
.action-buttons {  
  /* 操作按钮样式 */  
  margin-top: 20px;  
  display: flex;  
  justify-content: space-around;  
}  
  
.action-buttons button {  
  /* 按钮样式 */  
  padding: 10px 20px;  
  border: none;  
  border-radius: 5px;  
  cursor: pointer;  
  background-color: #007bff;  
  color: white;  
}  
  
.action-buttons button:hover {  
  background-color: #0056b3;  
}  
</style>